<template>
  <div class="home-mv-wrap">
    <div class="container">
      <div class="title">
        <h2>精选视频</h2>
        <a class="more">
          <span class="iconfont niceshuaxin"></span>获取新内容
        </a>
      </div>
      <div class="list clearfix">
        <div class="scroll">
          <mv-item v-for="item of mvs" :key="item.id" :item="item"></mv-item>
        </div>
        <div class="no-data">
          <loading :isFixed="isFixed" :isShow="isShow" :finishedText="finishedText"></loading>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mvItem from '@/components/MvItem'
import loading from '@/components/Loading'
export default {
  name: 'HomeMv',
  data () {
    return {
      loading: false,
      finished: false,
      limit: 20,
      mvs: [],
      offset: 0,
      loadStatus: true,
      isFixed: false,
      isShow: false,
      finishedText: ''
    }
  },
  components: {
    mvItem,
    loading
  },
  methods: {
    __initScroll () {
      window.addEventListener('scroll', () => {
        var _h = document.body.scrollHeight
        var scrollTop = document.documentElement.scrollTop
        var clientHeight = document.documentElement.clientHeight
        if (scrollTop + clientHeight >= _h * 0.9) {
          if (this.loadStatus) {
            this.getTopMv(this.limit, this.offset)
          }
        }
      })
    },
    // 获取mv
    async getTopMv (limit, offset) {
      try {
        this.loadStatus = false
        let res = await this.$api.getTopMv(limit, offset)
        if (res.code === 200) {
          this.mvs = this.mvs.concat(res.data)
          if (res.hasMore) {
            this.finishedText = '加载中...'
            this.isShow = true
            this.loadStatus = true
            this.offset += 20
          } else {
            this.finishedText = '厉害啊, 拉完了~~'
            this.isShow = false
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.getTopMv(this.limit, this.offset)
  },
  mounted () {
    this.__initScroll()
  }
}
</script>

<style lang="stylus" scoped>
.home-mv-wrap {
  .container {
    padding: 0;
  }

  .title {
    display: flex;
    padding: 0 0.3rem 0.2rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    position: relative;

    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      content: '';
      box-sizing: border-box;
      height: 1px;
      border-bottom: 1px solid rgba(203, 203, 203, 1);
      transform: scaleY(0.1);
      transform-origin: 0 0;
    }

    h2 {
      font-size: 0.26rem;
      color: rgba(255, 255, 255, 1);
      font-weight: 100;
    }

    .more {
      display: block;
      font-size: 0.24rem;
      text-align: center;
      color: rgba(255, 255, 255, 1);
      line-height: 0.44rem;
      font-weight: 200;

      span {
        font-size: 0.22rem;
        margin-right: 0.1rem;
      }
    }
  }

  .list {
    .no-data {
      width: 100%;
      font-size: 0.24rem;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
